<include file="public/layout" />
<link rel="stylesheet" href="__PUBLIC__/pc/cropper/css/cropper.min.css">
<link rel="stylesheet" href="__PUBLIC__/pc/cropper/css/ImgCropping.css">
<style>
    .hide{display: none}
    .show{display: block}
</style>
<body style="background-color: #FFF; overflow: auto;">
<div id="toolTipLayer" style="position: absolute; z-index: 9999; display: none; visibility: visible; left: 95px; top: 573px;"></div>
<div id="append_parent"></div>
<div id="ajaxwaitid"></div>
<div class="page">
    <div class="fixed-bar">
        <div class="item-title"><a class="back" href="javascript:history.back();" title="返回列表"><i class="fa fa-arrow-circle-o-left"></i></a>
            <div class="subject">
                <h3><eq name="id" value="0">新增<else/>编辑</eq>广告</h3>
                <h5>网站系统自定义广告与管理</h5>
            </div>
        </div>
    </div>
    <form class="form-horizontal" id="addEditNavForm" method="post">
        <div class="ncap-form-default">
            <!--选择广告条位置-->
            <dl class="row">
                <dt class="tit">
                    <label for="pid"><em>*</em>所属父级</label>
                </dt>
                <dd class="opt">
                    <select class="small form-control" id="pid" name="pid" >
                    <option value="0" > 首页广告 </option>
                    <foreach name="columnList" item="vv">
                        <option value="{$vv.id}" <if condition="$vv['id'] eq $navigation[pid]"> selected </if> > {$vv.name} </option>
                        <if condition="isset($vv['child'])">
                            <foreach name="vv['child']" item="vvv">
                                <option value="{$vvv.id}" <if condition="$vvv['id'] eq $navigation[pid]"> selected </if> >
                                    &nbsp;&nbsp;&nbsp;|--{$vvv.name}
                                </option>
                            </foreach>
                        </if>
                    </foreach>
                    </select>
                </dd>
            </dl>
            <dl class="row">
                <dt class="tit">
                    <label for="title"><em>*</em>广告名称</label>
                </dt>
                <dd class="opt">
                    <input type="text" value="{$navigation.title}" name="title" id="title" class="input-txt">
                    <span class="err" id="name_err" style="display: none">广告名称不能为空!!</span>
                    <p class="notic"></p>
                </dd>
            </dl>
            <dl class="row pic-box">
                <dt class="tit">
                    <label>广告广告</label>
                </dt>
                <dd class="opt">
                    <div id="replaceImg" style="width: 100px;height: 300px;border: solid 1px #555;padding: 5px;margin-top: 10px;cursor: pointer">
                        <img id="finalImg" src="" width="100%">
                    </div>
                    <input type="hidden" name="pic">
                    <span class="err" id="pic_err" style="display: none">广告名称不能为空!!</span>
                    <p class="notic"></p>
                </dd>
            </dl>
            <!--<dl class="row hide link-box">
                <dt class="tit">
                    <label for="url">广告链接</label>
                </dt>
                <dd class="opt">
                    <input type="text" value="{$navigation.url}" name="url" id="url" class="input-txt">
                    <span class="err"></span>
                    <p class="notic"></p>
                </dd>
            </dl>-->
            <dl class="row">
                <dt class="tit">
                    <label for="sort"><em>*</em>广告排序</label>
                </dt>
                <dd class="opt">
                    <input type="text" value="{$navigation.sort|default=1}" name="sort" id="sort" class="input-txt">
                    <span class="err"></span>
                    <p class="notic"></p>
                </dd>
            </dl>
            <dl class="row">
                <dt class="tit">
                    <label for="status"><em>*</em>是否显示</label>
                </dt>
                <dd class="opt">
                    <select class="form-control" id="status" name="status" >
                        <if condition="!empty($navigation)">
                            <option value="1" <if condition="1 eq $navigation[status]"> selected </if> > 是 </option>
                            <option value="0" <if condition="0 eq $navigation[status]"> selected </if> > 否 </option>
                        <else/>
                            <option value="1" selected> 是 </option>
                            <option value="0" > 否 </option>
                        </if>
                    </select>
                </dd>
            </dl>
            <!--图片裁剪框 start-->
            <div style="display: none" class="tailoring-container">
                <div class="black-cloth" onClick="closeTailor(this)"></div>
                <div class="tailoring-content">
                    <div class="tailoring-content-one">
                        <label title="上传图片" for="chooseImg" class="l-btn choose-btn">
                            <input type="file" accept="image/jpg,image/jpeg,image/png" name="file" id="chooseImg" class="hidden" onChange="selectImg(this)">
                            选择图片
                        </label>
                        <div class="close-tailoring"  onclick="closeTailor(this)">×</div>
                    </div>
                    <div class="tailoring-content-two">
                        <div class="tailoring-box-parcel">
                            <img id="tailoringImg">
                        </div>
                        <div class="preview-box-parcel">
                            <p>图片预览：</p>
                            <div class="square previewImg"></div>
                        </div>
                    </div>
                    <div class="tailoring-content-three">
                        <button class="l-btn cropper-reset-btn">复位</button>
                        <button class="l-btn cropper-rotate-btn">旋转</button>
                        <button class="l-btn cropper-scaleX-btn">换向</button>
                        <button class="l-btn sureCut" id="sureCut">确定</button>
                    </div>
                </div>
            </div>
            <!--图片裁剪框 end-->
            <div class="bot"><a href="javascript:;" onclick="checkForm();" class="ncap-btn-big ncap-btn-green" id="submitBtn">确认提交</a></div>
        </div>
        <input type="hidden" name="id" value="{$navigation.id}">
        <input type="hidden" name="is_ajax" value="1">
    </form>
</div>
<script type="text/javascript">
    var pid = $('#pid').val();
    var type = $('#type').val();
    var ajax_return_status = 1; // 标识ajax 请求是否已经回来 可以进行下一次请求

    $(function () {

        if(pid != 0){
            $('.is_nav-box').removeClass('show').addClass('hide');
        }

        if(type == 2){
            $('.pic-box').removeClass('hide').addClass('show');
        }

        if(type == 6){
            $('.link-box').removeClass('hide').addClass('show');
        }
    })

    // 判断输入框是否为空
    function checkForm(){
        var name = $("#addEditNavForm").find("input[name='title']").val();
        if($.trim(name) == '')
        {
            $("#name_err").show();
            return false;
        }
        if (ajax_return_status == 0) {
            return false;
        }
        ajax_return_status = 0;

        $.ajax({
            url:"{:U('Admin/Home/addEditAdvert')}",
            type:'post',
            dataType:'json',
            data:$('#addEditNavForm').serialize(),
            success:function(data){
                console.log(11);
                console.log(data);
                layer.closeAll();
                if(data.status==1){
                    layer.msg(data.msg, {icon: 1},function () {
                        window.location.href = data.url
                    });
                }else{
                    layer.msg(data.msg, {icon: 3});
                    ajax_return_status = 1;
                }
            }
        });
    }

    //判断位置
    $("#type").change(function(){
        var type = $(this).find("option:selected").val();

        $('.link-box,.pic-box').removeClass('show').addClass('hide');

        if(type == 2){
            $('.pic-box').removeClass('hide').addClass('show');
        }
        if(type == 6){
            $('.link-box').removeClass('hide').addClass('show');
        }
    });

    $("#pid").change(function(){
        var pid = $(this).find("option:selected").val();

        if(pid != 0){
            $('.is_nav-box').removeClass('show').addClass('hide');
        }else{
            $('.is_nav-box').removeClass('hide').addClass('show');
        }
    });

</script>
<script type="text/javascript" src="__PUBLIC__/pc/cropper/js/cropper.min.js"></script>
<script type="text/javascript">

    //弹出框水平垂直居中
    (window.onresize = function () {
        var win_height = $(window).height();
        var win_width = $(window).width();
        if (win_width <= 768){
            $(".tailoring-content").css({
                "top": (win_height - $(".tailoring-content").outerHeight())/2,
                "left": 0
            });
        }else{
            $(".tailoring-content").css({
                "top": (win_height - $(".tailoring-content").outerHeight())/2,
                "left": (win_width - $(".tailoring-content").outerWidth())/2
            });
        }
    })();

    //弹出图片裁剪框
    $("#replaceImg").on("click",function () {
        $(".tailoring-container").toggle();
    });
    //图像上传
    function selectImg(file) {
        if (!file.files || !file.files[0]){
            return;
        }
        var reader = new FileReader();
        reader.onload = function (evt) {
            var replaceSrc = evt.target.result;
            //更换cropper的图片
            $('#tailoringImg').cropper('replace', replaceSrc,false);//默认false，适应高度，不失真
        }
        reader.readAsDataURL(file.files[0]);
    }
    //cropper图片裁剪
    $('#tailoringImg').cropper({
        aspectRatio: 100/300,//默认比例
        preview: '.previewImg',//预览视图
        guides: false,  //裁剪框的虚线(九宫格)
        autoCropArea: 0.5,  //0-1之间的数值，定义自动剪裁区域的大小，默认0.8
        movable: false, //是否允许移动图片
        dragCrop: true,  //是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域
        resizable: true,  //是否允许改变裁剪框的大小
        zoomable: false,  //是否允许缩放图片大小
        mouseWheelZoom: false,  //是否允许通过鼠标滚轮来缩放图片
        touchDragZoom: true,  //是否允许通过触摸移动来缩放图片
        rotatable: true,  //是否允许旋转图片
        crop: function(e) {
            // 输出结果数据裁剪图像。
        }
    });
    //旋转
    $(".cropper-rotate-btn").on("click",function () {
        $('#tailoringImg').cropper("rotate", 45);
    });
    //复位
    $(".cropper-reset-btn").on("click",function () {
        $('#tailoringImg').cropper("reset");
    });
    //换向
    var flagX = true;
    $(".cropper-scaleX-btn").on("click",function () {
        if(flagX){
            $('#tailoringImg').cropper("scaleX", -1);
            flagX = false;
        }else{
            $('#tailoringImg').cropper("scaleX", 1);
            flagX = true;
        }
        flagX != flagX;
    });

    //裁剪后的处理
    $("#sureCut").on("click",function () {
        if ($("#tailoringImg").attr("src") == null ){
            return false;
        }else{
            var cas = $('#tailoringImg').cropper('getCroppedCanvas');//获取被裁剪后的canvas
            var base64url = cas.toDataURL('image/png'); //转换为base64地址形式
            $("#finalImg").prop("src",base64url);//显示为图片的形式
            $("[name=pic]").val(base64url);//显示为图片的形式

            //关闭裁剪框
            closeTailor();
        }
    });
    //关闭裁剪框
    function closeTailor() {
        $(".tailoring-container").toggle();
    }
</script>
</body>
</html>